<template>
  <div class="pages">
    <!-- 行程passcity -->
    <div class="healthinner">
      <el-container class="page-container">
        <div class="container-right">
          <!-- 搜索框 -->
          <el-form
            label-width="80px"
            class="page-form"
            ref="form"
            cell-style="padding:0"
            :model="sizeForm"
            size="mini"
            :row-style="{height: '20'}"
          >
          <div style="display:flex;">
            <el-form-item label="设备ID:" label-width="80px">
              <el-select ref="deviceId" @change="select1" v-model="sizeForm.deviceId" placeholder="请选择筛选设备ID">
                <el-option label="[空]" value=""></el-option>
                <template v-if="deviceIdList">
                  <template v-for="item in deviceIdList">
                    <el-option :label="item.deviceId" :value="item.deviceId" :key="item.deviceId"></el-option>
                  </template>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名:">
              <el-input v-model.trim="sizeForm.name" placeholder="请输入筛选人姓名"></el-input>
            </el-form-item>
            <!-- <el-form-item label="日期:" >
								<el-date-picker
									v-model="sizeForm.times"
									type="datetimerange"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									>
									</el-date-picker>
								</el-form-item>
 -->
            <el-form-item label="手机号:">
              <el-input v-model.trim="sizeForm.phone" placeholder="请输入筛选人手机号"></el-input>
            </el-form-item>
            <el-form-item label="身份证号:">
              <el-input v-model.trim="sizeForm.personNumber" placeholder="请输入筛选人身份证号"></el-input>
            </el-form-item>
            
           <!-- <el-form-item label="一级部门:" label-width="80px">
              <el-select ref="firstsel" @change="select1" v-model="sizeForm.deptOne" placeholder="请选择筛选人部门区域">
                <el-option label="[空]" value=""></el-option>
                <template v-for="item in deviceIdList">
                  <el-option :label="item.deptName" :value="item.id" :key="item.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
           <el-form-item label="二级部门:" v-if="hastwo" label-width="80px">
                <el-select ref="secondsel" @change="select2" v-model="sizeForm.deptTwo" placeholder="请选择筛选人部门区域">
                  <el-option label="[空]" value=""></el-option>
                  <template v-for="item in deptTwoList">
                    <el-option :label="item.deptName" :value="item.id" :key="item.id"></el-option>
                  </template>
                </el-select>
            </el-form-item> -->
            <!--  <el-form-item label="三级部门:" v-show="hasthree" label-width="80px">
                <el-select ref="threesel" @change="select3" v-model="sizeForm.deptThree" placeholder="请选择筛选人部门区域">
                  <el-option label="[空]" value=""></el-option>
                  <template v-for="item in deptThreeList">
                  <el-option :label="item.deptName" :value="item.id" :key="item.lable"></el-option>
                </template>
                </el-select>
            </el-form-item> -->
            <!--  <el-form-item label="三级部门">
              <el-select v-model="sizeForm.deptThree" @change="select3" placeholder="请选择筛选人部门区域">
                <el-option label="[空]" value=""></el-option>
                <template v-for="item in deptThreeList">
                  <el-option :label="item.deptName" :value="item.id" :key="item.lable"></el-option>
                </template>
              </el-select>
            </el-form-item> -->
           
              <!-- 行程 -->
            <br/>
          </div>
          <div class="bottomcard" > 
            <el-form-item label="码状态">
              <el-select v-model="sizeForm.codeStr" placeholder="请选择健康码状态">
                <el-option label="[空]" value=""></el-option>
                <el-option label="绿码" value="绿码"></el-option>
                <el-option label="黄码" value="黄码"></el-option>
                <el-option label="红码" value="红码"></el-option>
              </el-select>
            </el-form-item>
             <!-- 打卡 -->
             <!-- <el-form-item label="打卡:">
              <el-select v-model="sizeForm.isReachRiskArea" placeholder="是否打卡">
                <el-option label="[空]" value=""></el-option>
                <el-option label="已打卡" value="1"></el-option>
                <el-option label="未打卡" value="0"></el-option>
              </el-select>
             </el-form-item> -->
             <!-- 打卡 -->
             <!-- 是否去过中高风险地区 -->
            <!--  <el-form-item label="行程:">
              <el-select v-model="sizeForm.passCity" placeholder="是否打卡">
                <el-option label="[空]" value=""></el-option>
                <el-option label="未去过中高风险地区" value="未去过中高风险地区"></el-option>
                <el-option label="疑似去过中高风险地区" value="疑似去过中高风险地区"></el-option>
                <el-option label="未核验行程" value="未核验行程"></el-option>
              </el-select>
             </el-form-item>
             <el-form-item label="疫苗针数:">
              <el-select  v-model="sizeForm.vaccinationTime" placeholder="筛选疫苗针数">
                <el-option label="[空]" value=""></el-option>
                <el-option label="0针" value="0"></el-option>
                <el-option label="1针" value="1"></el-option>
                <el-option label="2针" value="2"></el-option>
                <el-option label="3针" value="3"></el-option>
              </el-select>
             </el-form-item>
             <el-form-item label-width="100px" label="最近核酸时间:">
                <el-select  v-model="sizeForm.nucleicAcidTime" placeholder="筛选疫苗针数">
                <el-option label="[空]" value=""></el-option>
                <el-option label="3天之内" value="3"></el-option>
                <el-option label="7天之内" value="7"></el-option>
                <el-option label="14天之内" value="14"></el-option>
              </el-select> -->
                  <!-- <el-checkbox v-model="sizeForm.nucleicAcidTime">14天之内</el-checkbox> -->
             <!-- </el-form-item> -->
             <!-- 是否去过中高风险地区 -->
          </div>
          <div class="fealsh">
              <el-tooltip class="item" effect="dark" content="按筛选条件搜索" placement="bottom-start">
                <el-button type="primary" style="width:150px;height:40px;" @click="onSubmit">搜索</el-button>
            </el-tooltip>
            <!-- <el-tooltip class="item" effect="dark" content="将列表内的结果导出为Excel" placement="bottom">
              <el-button type="success" @click="exportExcel">导出筛选结果</el-button>
            </el-tooltip> -->
            <el-tooltip class="item" effect="dark" content="清空筛选条件" placement="bottom">
              <el-button type="info" @click="clear">清空筛选条件</el-button>
            </el-tooltip>
            <!-- <el-tooltip class="item" effect="dark" content="刷新数据" placement="bottom">
              <el-button type="success" @click="$router.go(0)">刷新数据</el-button>
            </el-tooltip> -->
          </div>
            <!-- 单人导入 -->
          </el-form>
          <!-- 搜索框 -->
          <!-- 显示的数据 -->
            <!--  -->
          <el-table 
              height="60vh"
              stripe
            :data="trafficData"
            id="table"
            :header-cell-style="{
              textAlign: 'center',
            }"
            :row-style="{height: 'calc(100vh * 0.10)',overflow:'hidden'}"
            :cell-style="{
              textAlign: 'center',
              padding: '30',

            }"
            v-loading="tableLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >  
          <el-table-column prop="deviceId" label="设备ID" :resizable="false">
            </el-table-column>
            <el-table-column prop="name" label="姓名" :resizable="false">
            </el-table-column>
            <!-- <el-table-column prop="deptOne" label="部门" :show-overflow-tooltip="true" :resizable="false">

            </el-table-column> -->
            <el-table-column prop="phone" label="手机号" :resizable="false">
              <template slot-scope="scope">
                 <span v-if="scope.row.phone">{{scope.row.phone}}</span>
                  <span v-else>未知</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="personNumber"
              label="身份证号"
              :resizable="false"
               width="200"
            >
              <!-- width="200px" -->
            </el-table-column>
            <el-table-column label="码状态" :resizable="false" >
               <template slot-scope="scope">
                 <span v-show="false">{{scope.row.codeStr}}</span>
                 <template v-if="scope.row.codeStr">
                    <img style="height:20px;" v-if="scope.row.codeStr=='绿码'" :src="greenImg" alt="">
                    <img style="height:20px;" v-else-if="scope.row.codeStr=='黄码'" :src="yellowImg" alt="">
                    <img style="height:20px;" v-else-if="scope.row.codeStr=='红码'" :src="redImg" alt="">
                    <span style="line-height:20px;" v-else>{{scope.row.codeStr}}</span>
                 </template>
                  <span v-else style="line-height:20px;">未知</span>
              </template>
            </el-table-column>
          <el-table-column label="非绿码原因"  :show-overflow-tooltip="true"  prop="redCodeReason">
            <template  slot-scope="scope">
              <span v-if="scope.row.redCodeReason">{{scope.row.redCodeReason}}</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="非绿码原因" prop="redCodeReason">
            <template  slot-scope="scope">
              <span v-if="scope.row.redCodeReason">{{scope.row.redCodeReason}}</span>
              <span v-else>无</span>
            </template>
          </el-table-column> -->
            <el-table-column
              label="最近核酸时间"
              :resizable="false"
            >
               <template slot-scope="scope">
                 <span v-if="scope.row.nucleicAcidDateTime.length>10">{{scope.row.nucleicAcidDateTime.substring(0,10)}}</span>
                  <span v-else-if="scope.row.nucleicAcidDateTime.length==0">无</span>
                  <span v-else>{{scope.row.nucleicAcidDateTime}}</span>
              </template>
            </el-table-column>
                 <el-table-column
              label="是否去过中高风险地区"
              :resizable="false"
              :show-overflow-tooltip="true" 
            >
              <template slot-scope="scope">
                <span v-if="scope.row.isReachRiskArea == '1'">未去过高风险地区</span>
                <span v-if="scope.row.isReachRiskArea == '2'">疑似去过中高风险地区</span>
                <span v-if="scope.row.isReachRiskArea == '3'">无行程信息</span>
                <span v-if="scope.row.isReachRiskArea == '0'">未核验行程</span>
                <span v-if="!scope.row.isReachRiskArea">未核验行程</span>
              </template>
            </el-table-column>
            <el-table-column
              label="疫苗"
              :resizable="false"
              width="50"
            >
            <template slot-scope="scope">
              <span v-if="!scope.row.vaccinationTime">0针</span>
              <span v-else>{{scope.row.vaccinationTime}}针</span>
            </template>
            </el-table-column>
             <el-table-column
              label="是否开门"
              :resizable="false"
              prop="isOpen"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.isOpen">是</span>
              <span v-else>否</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 显示的数据 -->
          <!-- 分页器部分 -->
          <div class="block" v-show="trafficData.length>0">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalSize">
            </el-pagination>
          </div>
          <!-- 分页器部分 -->
        </div>
      </el-container>
      <!-- 分页器部分 -->
     
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import {getDeviceId,firstPage,healthPage,resultList} from "@/request/healthy"
import { mapGetters } from "vuex";
import {TimeDate} from "../utils/farmat"
export default {
  name: "pages1",
  data() {
    return {
      healthData:[],
      greenImg:require("@/assets/imgs/绿码@2x.png"),
      yellowImg:require("@/assets/imgs/黄码@2x.png"),
      redImg:require("@/assets/imgs/红码@2x.png"),
      oneClass:require("@/assets/oneClass.json"),//只有一级部门
      userarr: [],
      single:false,//单个员工导入按钮的启用
      more:false,//Excel导入员工按钮的启用
      tableLoading: false,//加载是否显示
      disreflash:true,//禁用刷新
      sizeForm: {   
        times:[
					new Date(new Date().toLocaleDateString()).getTime(),
					new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
				]
      },
      tripNull:"",//行程
      current:1,
      limit:5,
      AllData:[],
      currentPage: 1,//分页当前地几页
      pageSize:5,//每页50条
      totalSize:20,//一共4000条
      fileData: [],
      trafficData: [],
      currentPageData:[],//前端实现分页
      title: "导出结果",
      dialogVisible: false,
      hastwo:false, //不显示
      hasthree:false,
      pickerOptions: {
        disabledDate: (time) => {
          // 设置可选择的日期为今天之后的一个月内
          const curDate = new Date().getTime();
          // 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
          const day = 10 * 24 * 3600 * 1000
          const dateRegion = curDate - day;
          return (
            time.getTime() > Date.now() - 8.64e7 || time.getTime() < dateRegion
          );
        },
      },//日期选择器
      list: [],
      oneres: {
        headimage: "",
        intype: "",
        name: "",
        opentime: "",
        personNumber: "",
        position: "",
        mase: "",
        xc: "",
        hs: "",
      },
      queryStr:{},//地址栏查询字符串
      nowtime:0,//进度条
      timer:null,
      deviceIdList:[],
      deptTwoList:[],
      deptThreeList:[],
      deptId:"",
      deptIdTow:"",
      deptName:"",//要传的名字
      selData:[],//要筛选的结果
    };
  },
  computed: {
    //第一种写法
    ...mapGetters(["cartLength", "cartList"]),
    // 第二种写法111
    // ...mapGetters({
    // 	length:'cartLength',
    // 	list:'cartList'
    // })
    /**
     * 对分页器的封装
     */
    pageSizes(){
      return [5]
    }
  },
  created(){
    let that = this;
    this.timer = setInterval(()=>{
     var now = new Date();
     if (now.getMinutes()%2==0) {
       that.disreflash = true
     }else{
       that.disreflash = false
     }
    },20000)
    this.getFirstlist()
  },
  destroyed() {
  },
  // 保持原页面数据不变的跳转
  deactivated() {
  },
  // 保持原页面数据不变的跳转
  activated() {
  },
  methods: {
    /**
     * 搜索按钮
     */
     async onSubmit() {
      //  向下加id
      //  向下加id
      
      this.dialogVisible = true;
      var obj = this.sizeForm;
      // console.log(this.sizeForm.deviceId);
      /* if(obj.times[0]){
					var beginDt= TimeDate(obj.times[0]);
      }
      if(obj.times[1]){
        var endDt = TimeDate(obj.times[1]);
      }
      console.log(beginDt);
      console.log(endDt); */
      var str = "?"
      /*  if (this.sizeForm.personNumber) {
        str = str + "&personNumber="+this.sizeForm.personNumber;
      } */
      // deviceId
      if (this.sizeForm.deviceId) {
        str = str + "&deviceId="+this.sizeForm.deviceId;
      }
      if (this.sizeForm.name) {
        str = str + "&name="+this.sizeForm.name;
      }
       if (this.sizeForm.codeStr) {
        str = str + "&codeStr=" + this.sizeForm.codeStr;
      }
      if(this.sizeForm.phone){
        str = str + "&phone=" + this.sizeForm.phone;
      }
      if(this.sizeForm.personNumber){
        str = str + "&personNumber=" + this.sizeForm.personNumber;
      }
      /*if (this.sizeForm.deptOne) {
        str = str + "&deptOne=" + this.sizeForm.deptOne;
      }
      if (this.sizeForm.deptTwo) {
        str = str + "&deptTwo=" + this.sizeForm.deptTwo;
      }
      
     
      if(this.sizeForm.isReachRiskArea){
        str = str + "&isReachRiskArea=" + this.sizeForm.isReachRiskArea;
      }
      if(this.sizeForm.passCity){
        str = str + "&passCity=" + this.sizeForm.passCity;
      }
      if(this.sizeForm.vaccinationTime){
        str = str + "&vaccinationTime=" + this.sizeForm.vaccinationTime;
      }
      if(this.sizeForm.nucleicAcidTime){
        str = str + "&nucleicAcidTime=" + this.sizeForm.nucleicAcidTime;
      } */
      /* if(beginDt){
        str = str + "&beginDt=" + beginDt;
      }
      if(endDt){
        str = str + "&endDt=" + endDt;
      } */
      this.$router.push(str)
    },
    /**
     * 导出excel表格
     */
    // this.queryStr.tripErr
    exportExcel(){
      // console.log(this.sizeForm.deviceId);
      if(this.sizeForm.deviceId){
        window.location.href=this.$postUrlbase+`/admin/health/export?deviceId=${this.sizeForm.deviceId}`
      }else{
        let str = `${this.$postUrlbase}/admin/health/export?name=${this.sizeForm.name}&phone=${this.sizeForm.phone}&personNumber=${this.sizeForm.personNumber}&codeStr=${this.sizeForm.codeStr}&isReachRiskArea=${this.sizeForm.isReachRiskArea}&passCity=${this.sizeForm.passCity}&vaccinationTime=${this.sizeForm.vaccinationTime}&healthErr=${this.sizeForm.healthErr}&nucleicAcidTime=${this.sizeForm.nucleicAcidTime}`
        if (this.sizeForm.tripErr) {
          window.location.href=str+`&tripErr=${this.sizeForm.tripErr}`
        }else{
          if (this.queryStr.tripNull){  
            window.location.href=str+`&tripNull=${this.queryStr.tripNull}`
          }
          else{
            if(this.sizeForm.deptTwo){
              window.location.href=str+`&deptTwo=${this.sizeForm.deptTwo}`
            }
            else if(this.sizeForm.deptOne){
              window.location.href=str+`&deptOne=${this.sizeForm.deptOne}`
            }
            else{
              window.location.href=str
            }
          }
        }
      }
    
      
    },
    /**
     * 弹出框关闭
     */
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    /**
     * 导入 上传 xlsx 事件
     */
    UploadImport(file, fileList) {
      this.single = true;//禁用单个导入
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    /**
     * 处理日期
     */
    formatData(i) {
      if (i) {
        var dat = new Date(i);
      } else {
        var dat = new Date();
      }
      let month = dat.getMonth() + 1;
      let day = dat.getDate();
      return month + "月" + day + "日";
    },
    // 读取数据
    // 弹出表单的取消
    /**
     * 清空筛选条件
     */
    clear(){
      this.sizeForm={   
        name:"",
        phone:"",
        personNumber:"",
        deptOne:"",
        deptTwo:"",
        codeStr:"",
        isReachRiskArea:"",
        passCity:"",  
        healthErr:"",
        nucleicAcidTime:"",
        vaccinationTime:"",
        deviceId:"",
        times:["",""]
      }
      this.$router.push("/healthy")
    },
    // 弹出表单的确认,单个员工的信息导入
    /**
     * 分页
     */
    async findbyPage(i,j){
      this.tableLoading = true;
      this.currentPage =i ;
      this.pageSize=j;
      this.current =i;
      this.limit = j;
      this.getData()
    },
    // 
    /**
     * 分页函数
     */
    handleSizeChange(val) {
      this.findbyPage(this.currentPage,val)
    },
    handleCurrentChange(val) {
      this.findbyPage(val,this.pageSize)
    },
    /* 
    
    */
    getFirstlist(){
      let that = this;
      // /docking/getDeviceId
      getDeviceId().then(res=>{
        this.hastwo = false;
        for (let index = 0; index < res.data.data.length; index++) {
          if(res.data.data[index].deviceId){
            this.deviceIdList.push(res.data.data[index])
          }
          
        }
        // console.log(this.deviceIdList);
      })
    },
    getTwoList(i){
      
      
    },
    getThereList(i){
       
    },
    // 发起数据请求，给trafficData赋值，页面详情页页面跳转时，要将pageSize和currentPage保存下来
    /**
     * 刷新按钮
     */
    // 获取所有数据
    // GET /admin/health/findAll
    // http://183.136.159.118:29081/admin/health/getAllHealthMsg 每天调用一次
    
    async findAll(){
      var res = await axios.get(`/admin/health/findAll`)
      this.AllData = res.data.data;
    },
    getNew(){
      this.findbyPage(1,5)
    },
    // 翻页时
    async getData(){
        var str = ""
       if (this.queryStr.deviceId) {
        //  console.log(this.queryStr.deviceId);
        str = str + "&deviceId="+this.queryStr.deviceId;
      }
      if (this.queryStr.name) {
        str = str + "&name="+this.queryStr.name;
      }
      
      if (this.queryStr.codeStr) {
        str = str + "&codeStr=" + this.queryStr.codeStr;
      }
      if(this.queryStr.phone){
        str = str + "&phone=" + this.queryStr.phone;
      }
      if(this.queryStr.personNumber){
        str = str + "&personNumber=" + this.queryStr.personNumber;
      }
      /*
      if (this.queryStr.deptOne) {
        str = str + "&deptOne=" + this.queryStr.deptOne;
      }
      if(this.sizeForm.deptTwo){
        str = str + "&deptTwo=" + this.queryStr.deptTwo;
      }
      
      if(this.queryStr.passCity){
        str = str + "&passCity=" + this.queryStr.passCity;
      }
      if(this.queryStr.nucleicAcidTime){
        str = str + "&nucleicAcidTime="+this.queryStr.nucleicAcidTime;
      }
      if(this.queryStr.healthErr){
        str = str + "&healthErr="+ this.queryStr.healthErr;
      }
      if(this.queryStr.tripErr){
        str = str + "&tripErr="+ this.queryStr.tripErr;
      }
      if(this.queryStr.tripNull){
        str = str +"&tripNull="+this.queryStr.tripNull
      } */
      this.tableLoading = true;
      resultList(this.currentPage,this.limit,str).then(
        res=>{
          if(res.data.code==200){
            if(res.data.data.records&&res.data.data.records.length>0){
              this.tableLoading = false;
              this.totalSize = res.data.data.total;
              this.trafficData = res.data.data.records;
            }else{
              this.$message.error("未搜索到通行记录")
              this.trafficData = [];

              this.tableLoading = false;
            }
          }
        }
      )
    },
    // 搜索的置零
    // 联动部分
    select1(val){
      this.$nextTick(()=>{
        this.deptTwoList=[]
      })
        if(val){
          this.getTwoList(val)
          this.deptId = val
         this.deptIdTow = ''
        }else{
          this.sizeForm.deptTwo = null
        }
    },
    select2(val){
      if(val){ 
          this.getThereList(val)
         this.deptIdTow = val
        }
    },
    select3(val){

    },
  },
  filters: {
    /**
     * 处理时间
     */
    format1(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y =
        time.getFullYear() < 10 ? "0" + time.getFullYear() : time.getFullYear();
      var m =
        time.getMonth() + 1 < 10
          ? "0" + (time.getMonth() + 1)
          : time.getMonth() + 1;
      var d = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
      var h = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
      var mm =
        time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
      var s =
        time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
      return y + "年" + m + "月" + d + "日" + h + "时" + mm + "分" + s + "秒";
},
  },
  
  watch:{
    "$route":{
      handler(newval,oldval){
        this.queryStr = newval.query;
        if(this.queryStr.name){
          this.sizeForm.name = this.queryStr.name
        }
        // if(this.queryStr.name){
         /*  this.sizeForm.name = this.queryStr.name
        } */
        // personNumber
         if(this.queryStr.personNumber){
          this.sizeForm.personNumber = this.queryStr.personNumber
        }
        if(this.queryStr.deviceId){
          this.sizeForm.deviceId = this.queryStr.deviceId
        }
        if(this.queryStr.nucleicAcidTime){
          this.sizeForm.nucleicAcidTime = this.queryStr.nucleicAcidTime
        }
        if(this.queryStr.phone){
          this.sizeForm.phone = this.queryStr.phone
        }
        if(this.queryStr.personNumber){
          this.sizeForm.personNumber = this.queryStr.personNumber
        }
        if(this.queryStr.codeStr){
          this.sizeForm.codeStr = this.queryStr.codeStr
        }
        if(this.queryStr.isReachRiskArea){
          this.sizeForm.isReachRiskArea = this.queryStr.isReachRiskArea;
        }
        if(this.queryStr.vaccinationTime){
          this.sizeForm.vaccinationTime = this.queryStr.vaccinationTime
        }
        if(this.queryStr.passCity){
          this.sizeForm.passCity = this.queryStr.passCity
        }
        if(this.queryStr.tripErr){
          this.sizeForm.tripErr = this.queryStr.tripErr
        }
        if(this.queryStr.tripNull){
          this.sizeForm.tripNull = this.queryStr.tripNull
        }
        this.getData()
      },immediate:true
    },
  }
};
</script>

<style scoped lang="scss">
.pages {
  width: 100%;
}

.tableBox{
  th{
    padding: 0 !important;
  }
  td{
    padding: 0 !important;
  }
}
.bottomcard{
  display: flex;
  height: 40px;
  align-items: center;
}
.fealsh{
  display: flex;
  margin: 0;
  justify-content: flex-end;
}
.healthinner {
  border-radius: 20px;
  width: 85%;
  margin: 0 auto;
  background-color: #fff;
  height: calc(85vh);
  position: relative;
}

.page-aside {
  width: 150px;
  height: 100%;
  border-right: solid 1px #e6e6e6;
}

.container-right {
  width: 95%;
  margin: 20px auto;
  height: calc(100vh - 110px);
}

.el-form-item {
  margin-bottom: 0;
  margin-right: 15px;
}

::deep .el-form-item--mini .el-form-item__content,
::deep .el-form-item--mini .el-form-item__label {
  line-height: 36px;
}

::deep .el-input--mini .el-input__inner {
  height: 36px;
  line-height: 36px;
}

.el-col-2 {
  text-align: center;
}

.el-button--primary {
  margin: 0;
  padding: 0;
  width: 60px;
  height: 36px;
  line-height: 36px;
}

.el-table {
  width: 95%;
  margin: 0 auto;
}

::deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  width: 16.7%;
  text-align: center;
}
.dialog-footer {
  display: flex;
  flex-direction: row-reverse;
}
.el-loading-spinner {
  font-size: 80px;
  font-weight: bold;
}
.el-loading-mask .el-loading-spinner .el-loading-text {
  font-size: 80px;
}
/* 表格滚动条的美化 */
#outtable{
  background-color: red;
}
.el-loading-mask ::deep .el-loading-spinner{
  font-size: 200px;
  background-color: red;
}
.block{
  background-color: #fff;
  /* width: 100%;
  display: flex;
  background-color: green;
  align-items: center;
  height: 5vh;
  position: absolute;
  bottom: -2%;
  left: 5%;*/
} 
.page-container{
  display: block;
  height: 85vh;
  padding-top: 1vh;
}
</style>
